<template>
    <div class="admin_address_wrap" @touchmove.prevent>
        <div class="fixd_wrap">
            <back :title="'用户信息管理'"></back>
        </div>
        <div class="content_wrap">
              <ul>
                <li><span>修改用户姓名</span>
                  <div>
                      <input v-model="userName" type="text" placeholder="请填写您的姓名">
                  </div>
                </li>
                <li @click="isUpImg=true"><span>修改用户头像</span><i></i><img v-show="user_img" :src="user_img" alt=""></li>
              </ul>
              <p @click="baocun_user">保存</p>
        </div>
        <up-load ref="upLoadVue" v-show="isUpImg" @get_imgSrc="get_imgSrc" @cancle_up="cancle_up"></up-load>
        <vue-cropper
          class="cropper"
          :autoCrop="true"
          v-if="imgSrc"
          ref="cropper"
          :img="imgSrc"
          outputType="jpeg"
          :fixed="true"
          :canMove="false"
          :outputSize="0.2"
          @imgLoad="img_ready"
        ></vue-cropper>
         <div  v-show="imgSrc&&!imgLoading" class="btn_wrap">
           <b @click="imgSrc=''">取消</b>
           <span @click="get_new_img">确定</span>
         </div>
         <div v-show="imgLoading" class="loading_wrap">
           <img src="../assets/img/loading.gif" alt="">
         </div>
    </div>
</template>

<script>
    import VueCropper from 'vue-cropper'
    import back from 'components/back'
    import {stop_slider} from 'assets/base/base'
    import {get_cookie} from 'assets/cookie/cookie'
    import {set_user_info,get_user_info} from 'api/address'
    import {get_car_number} from 'api/shop_car'
    import upLoad from 'base/upLoadImg'
    import {mapMutations} from 'vuex'


    export default {
        name: "setUser",
        data() {
            return {
              isUpImg:false,
              imgSrc:'',
              user_img:'',
              userName:'',
              imgLoading:false
            }
        },
        created() {

        },
        activated() {
          this.imgSrc=''
          this.isUpImg=false
          get_car_number({
            token:get_cookie('key')
          }).then(res=>{
            if(res.status===200&&res.data.resStatus===0) {
              this.user_img=res.data.data[0]['userIcon']
              this.userName=res.data.data[0]['no-user']
            }
          })
        },
        computed: {},
        methods: {
          get_imgSrc(src){
            this.imgSrc=src
           },
          get_new_img(){
            this.imgSrc=''
            this.$refs.cropper.getCropData((data) => {
              // do something
              this.user_img=data
            })

          },
          baocun_user(){
            set_user_info({
              token:get_cookie('key'),
              names:this.userName,
              icon:this.user_img.length>100?this.user_img:''
            }).then((res)=>{
              if(res.status===200&&res.data.resStatus===0) {
                this.$router.push('/my')
              }else{
                this.setHint({
                  text:'您并没有修改哦！',
                  ok:false,
                  isHint:true
                })
              }
            })
          },
          img_ready(){
            setTimeout(()=>{
              this.imgLoading=false
            },350)
            this.$refs.upLoadVue.$refs.file_input.value=''
          },
          cancle_up(hasImg){
            if(hasImg==='hasImg'){
              this.imgLoading=true
            }
            this.isUpImg=false
          },
          ...mapMutations({
            setHint:'SET_HINT'
          })
        },
        components: {
            back,
          upLoad,
          VueCropper
        }
    }
</script>

<style scoped lang="scss">
    .admin_address_wrap {
        position: fixed;
        background: #f8f8f8;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 11;
    }
    .fixd_wrap {
        max-width: 768px;
        margin: 0 auto;
        position: relative;
        z-index: 10;
    }

  .content_wrap {
      padding-top: 48px;
      >ul{
        >li{
          height: 55px;
          line-height: 55px;
          background-color: #fff;
          margin-top: 10px;
          border-bottom: 1px solid #eee;
          border-top: 1px solid #eee;
          font-size: 14px;
          >span{
            float: left;
            margin-left: 20px;
          }
          >i{
            float: right;
            width: 10px;
            height: 20px;
            margin-right: 20px;
            margin-top: 15px;
            background-image: url('../assets/img/right.png');
            background-size: 100% 100%;
          }
          >img{
            float: right;
            width: 53px;
            height: 53px;
            margin-right: 9px;
            border-radius: 50%;
          }
          >div{
               overflow: hidden;
               input{
                 display: block;
                 width: 100%;
                 margin-top: 17px;
                 border: none;
                 outline: none;
                 text-align: center;
                 font-size: 13px;
                 height: 18px;
               }
              input::-webkit-input-placeholder{
                 font-size:14px;
                }
             }
        }
      }

      >p{
        background: #019fe8;
        width: 80%;
        height: 35px;
        line-height: 35px;
        margin: 30px auto 0 auto;
        color: #fff;
        letter-spacing: 1px;
        border-radius: 5px;
        font-size: 15px;
        &:active{
          background-color: #008ed7;
        }
      }
    }
  .cropper{
    position: absolute !important;
    top: 0;
    z-index: 10;
  }
  .vue-cropper{
      background-image: none !important;
    }
  .btn_wrap{
      position: absolute;
      bottom: 60px;
      width: 100%;
      z-index: 10;
        >span{
          display: inline-block;
          width: 59px;
          height: 30px;
          background-color: #019fe8;
          color: #fff;
           line-height: 30px;
          margin-left: 30px;
          border-radius: 5px;
        }
      >b{
        display: inline-block;
        width: 59px;
        height: 30px;
        background-color: #eee;
        color: #333;
        line-height: 30px;
        border-radius: 5px;
      }
    }
  .loading_wrap{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100;
    >img{
      position: absolute;
      width: 50px;
      transform: translateX(-50%)translateY(-50%);
      left: 50%;
      top: 50%;
    }
  }
</style>
